@import "layout.less";
@import "header.less";
@import "left_panel.less";
@import "bottom_panel.less";
@import "war_map.less";
@import "filter_layer.less";
@import "../../../component/animation.less";
@import "../../../component/scrollbar.less";
@import "../../../component/form.less";
@import "../../../component/element.less";
// @import "../../../component/layer.less";

html,
body {
    height: 100%;
}

ul,
li {
    list-style: none;
}

.flex {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}

.flexRow {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}
.flex-row {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}
.item {
    flex: auto;
    -webkit-flex: auto;
}
.flex-item {
    flex: auto;
    -webkit-flex: auto;
}

.overflow {
    overflow-x: hidden;
    overflow-y: auto;
}
.zk-win-full-height {
    height: 100%;
    overflow: hidden;
}
.scrollBar() {
    &::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/

        height: 0px;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 8px;

        //  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: rgba(0, 0, 0, 0.3);
    }

    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/

        // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 8px;

        background: rgba(255, 255, 255, 0.5);
    }
}

@panel-move-width: 500px;

.panel-hide {
    animation: move-rl 1s;
    left: -@panel-move-width;
}

.panel-show {
    animation: move-lr 1s;
}

.panel-show-right {
    animation: move-right-rl 1s;
}

.panel-hide-right {
    animation: move-right-lr 1s;
    right: -@panel-move-width !important;
}

@keyframes move-lr {
    0% {
        left: -@panel-move-width;
    }

    50% {
        left: 0px;
    }
}

@keyframes move-rl {
    0% {
        left: 0px;
    }

    50% {
        left: -@panel-move-width;
    }
}

@keyframes move-right-lr {
    0% {
        right: 0px;
    }

    50% {
        right: -@panel-move-width;
    }
}

@keyframes move-right-rl {
    0% {
        right: -@panel-move-width;
    }

    50% {
        right: 0px;
    }
}

#allmap {
    width: 100%;
    height: 100%;
}

@font-face {
    font-family: zk-icon;
    vertical-align: middle;
    src: url("@{icon-path}/iconfont.eot?v=220");
    src: url("@{icon-path}/iconfont.eot?v=220#iefix")
            format("embedded-opentype"),
        url("@{icon-path}/iconfont.svg?v=220#iconfont") format("svg"),
        url("@{icon-path}/iconfont.woff?v=220") format("woff"),
        url("@{icon-path}/iconfont.ttf?v=220") format("truetype");
}

@font-face {
    font-family: zkuasgm-icon;
    vertical-align: middle;
    src: url("@{icon-path}/iconfont.eot?v=220");
    src: url("@{icon-path}/iconfont.eot?v=220#iefix")
            format("embedded-opentype"),
        url("@{icon-path}/iconfont.svg?v=220#iconfont") format("svg"),
        url("@{icon-path}/iconfont.woff?v=220") format("woff"),
        url("@{icon-path}/iconfont.ttf?v=220") format("truetype");
}

.zkuasgm-icon {
    font-family: zk-icon !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.zkuasgm-icon-user:before {
    content: "\e851";
}

.zkuasgm-icon-passwd:before {
    content: "\e603";
}

.zkuasgm-icon-qcode:before {
    content: "\e60d";
}

// 未整理
.main-box {
    position: relative;

    .search_list {
        padding: 0;
    }

    .case-event-box {
        @width: 300px;
        border: 1px solid #ccc;
        background: #fff;
        position: absolute;
        top: 5px;
        left: 50%;
        z-index: 500;
        width: @width;
        margin-left: -@width / 2;
        display: flex;
        padding: 10px;
        // border-radius: 0 0 10px 10px;
        border-radius: 10px;

        .label {
            display: flex;
            justify-items: center;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            padding: 0 5px;
        }
    }
}

.layui-form-select {
    .layui-input {
        border: 2px solid @main-color;
        border-radius: 5px;
    }
}

.layui-card {
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    .layui-card-header {
        // background: @main-color;
        // background: linear-gradient(90deg, #0081ff, #1cbbb4);
        // color: #fff;
        font-weight: bold;
        padding: 0 0 0 20px;
        // display: flex;
        // justify-items: center;
        // align-items: center;

        &::before {
            position: absolute;
            content: "";
            width: 2px;
            height: 16px;
            background: #fff;
            left: 10px;
            top: 13px;
            // align-self: baseline
        }
    }
}



.big-font-list {
    font-size: 15px;
}

.tsrq_list {
    ul {
        li {
            border: 0;

            p {
                word-wrap: break-word;
            }
        }
    }
}

.event-info {
    cursor: pointer;
    padding: 5px;

    p {
        display: flex;

        label {
            white-space: nowrap;
            color: #666;
        }
    }
}

.event-show {
    position: absolute;
    top: 10px;
    // bottom:10px;
    right: 10px;
    min-width: 300px;
    max-width: 300px;
    z-index: 502;
    // height: 90%;
    background: #fff;
    max-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    padding: 8px;

    .info-content {
        overflow-x: hidden;
        height: 100%;
        .scrollBar();
    }

    .event-btn-close {
        @btn-size: 24px;
        width: @btn-size;
        height: @btn-size;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -8px;
        right: -5px;
        z-index: 99;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 50%;
        line-height: 100%;
        cursor: pointer;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    .item-list{
        &>ul{
            &>li{
                border-bottom: 1px solid #3a3f59;
                padding:8px;
                &> .item-top{
                    display: flex;
                    margin:0 0 8px 0 ;
                    &>.item-img{
                        margin:0 8px 0 0;
                        img{
                            height:60px;
                            border:1px solid #ccc;
                            padding:2px;
                        }
                    }
                    &> .item-info{
                        &> ul{
                            &>li{
                                display: flex;
                                // align-items: center;
                                &>label{
                                    padding:0 6px 0 0;
                                    color:#ccc;
                                    white-space:nowrap;
                                }
                            }
                        }
                    }
                }
                &> .item-main{
                    &> .item-btn-box{
                        display: flex;
                        flex-wrap: wrap;
                        &>.layui-btn{
                            padding:2px 12px;
                            display: flex;
                            line-height: 20px;
                            margin:4px 0 0 4px;
                            &>i{
                                margin:0 4px 0 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
.team-list{
    width: 100%;
    padding:10px;
    .layui-form-checkbox{
        margin:4px 0 0 4px;
    }
}
.dispatch-box{
    padding:10px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    // flex-wrap: wrap;
    .title{
        text-align: center;
    }
    .layui-form-checkbox{
        margin:4px 0 0 4px;
    }
    
    &>.car-list{
        flex:0 0 40%;
        margin:0 10px 0 0;
        overflow: auto;
        .scrollbar();
    }
    &>.man-list{
        flex:0 0 60%;
        overflow: auto;
        .scrollbar();
    }
}
.fire-table-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    tr {
        display: flex;
        border-bottom: 1px solid #ccc;
        &:last-child {
            border: 0;
        }
        td {
            flex: auto;
            padding: 8px 4px;
            &.left {
                flex: 0 0 90px;
                justify-content: center;
                display: flex;
                align-content: center;
                flex-direction: column;
            }
        }
    }
    img {
        max-width: 80px;
        border: 1px solid #ccc;
        padding: 2px;
        margin: 4px;
    }

    .fire-table-main {
        height:100%;
        align-items:center;
        display: flex;
        ul {
            width: 100%;
            li {
                padding: 0 0 5px 0;
                display: flex;
                align-items: center;
                &.title{
                    font-size:16px;
                }
                // justify-content: center;

                label {
                    color: #666;
                    white-space: nowrap;
                    padding: 0 3px 0 0;
                    flex: 0 0 60px;
                    text-align: right;
                }

                span {
                    color: #000;
                    word-break: break-all;
                    flex-grow: 1;
                    // flex:auto;
                }
            }
        }
    }
}

.panel-title {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 8px;
    background: #eee;
    display: flex;
    justify-content:space-between;
    align-items: center;
    &>.layui-form-select{
        width:160px;
    }
}

.fire-slider-box {
    display: flex;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    // margin: 0 0 10px 0;
    width: 480px;
    left: 50%;
    margin: 0 0 5px -200px;
    bottom: 100px;
    z-index: 500;
    border-radius: 5px;

    .slider-name {
        display: flex;
        font-size: 16px;
        font-weight: bold;
        align-items: center;
        padding: 0 10px;
    }

    .fire-slider {
        padding: 20px 20px;

        flex-grow: 1;
        position: relative;

        .layui-slider-input {
            top: 6px;
            right: 8px;
        }
    }

    .layui-slider-input {
        padding: 0 0 0 0px;
    }
}

.fire-note {
    padding: 10px;

    .fire-note-main {
        margin: 10px 0;
    }
}

@stepDotSize: 16px;
@stepBorderColor: #5fb878;

.zku-step-box {
    position: relative;
    padding: 10px 0;
    ul {
        font-size: 0;
        display: flex;
        justify-content:space-between;
        
        li {
            padding: 0 15px;
            position: relative;
            font-size: 12px;
            cursor: pointer;
            flex-grow: 1;
            &:first-child:before {
                left: 50%;
            }

            &:last-child:before {
                width: 50%;
            }

            &::before {
                content: "";
                position: absolute;
                left: 5px;
                top: @stepDotSize / 2;
                z-index: 0;
                width: 100%;
                height: 1px;
                background-color: @stepBorderColor;
            }

            p {
                z-index: 99;
                text-align: center;

                span {
                    &.icon {
                        position: relative;
                        border: 1px solid @stepBorderColor;

                        border-radius: 50%;
                        width: @stepDotSize;
                        height: @stepDotSize;
                        display: inline-block;
                        background: #fff;
                    }

                    &.text {
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
            }

            &.hover {
                p {
                    .icon {
                        background: darken(@stepBorderColor, 20%);
                        
                    }

                    
                }
            }

            &.date {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &::before {
                    background: none;
                }
            }
        }
    }
}

// layui-form
.layui-form {
    .layui-form-item {
        .layui-input-block {
            display: flex;
            align-items: center;
        }
    }
}

.form-img-list {
    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            margin: 0 8px 8px 0;

            img {
                height: 80px;
                border: 1px solid #ccc;
                padding: 3px;
            }
        }
    }
}

.road-list {
    ul {
        li {
            border-bottom: 1px dashed #ccc;
            padding: 5px 0;
            cursor: pointer;

            p {
                &.name {
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
    }
}

.tips-box {
    width: 240px;

    .img {
        background: url("/core/images/gis/dispatch/none.png") no-repeat;
        background-size: contain;
        height: 120px;
    }

    .text {
        text-align: center;
        font-size: 16px;
    }
}

.confirm-box {
    .layui-form-item {
        margin: 0;

        .layui-form-label {
            color: #666;
        }
    }

    .tips {
        text-align: center;
        margin: 0 0 10px 0;
        font-size:16px;
        color:#f00;
        font-weight: bold;
    }

    .btn-box {
        text-align: center;
    }
}
.form-label-lg {
    @labelWidth: 160px;

    .layui-form-label {
        width: @labelWidth;

        &:hover {
            // white-space: pre-wrap;
            // display: block;
            // width: @labelWidth;
            // // min-width: 80px;
            // position: absolute;
            // height: 15px;
            // border: 1px solid #f00;

            // &+.layui-input-inline {
            //     margin-left: 125px;
            // }
        }
    }

    .layui-input-block {
        margin-left: @labelWidth+30px;
    }


}
.video-box{
    // height:100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    // flex-direction: row;
    // justify-content:space-around;
    .item{
        border:1px solid #ccc;
        box-sizing: border-box;
        width:32%;
        // height:33%;
        height:300px;
        flex:none; 
        display: flex;
        flex-direction: column;
        margin:10px 0 0 10px;
        // align-items:stretch;
        border-radius: 5px;
        .video{
            height:100%;
            padding:5px;
            video{
                width:100%;
                height:100%;
            }
        }
        .text{
            text-align: center;
            padding:8px 0;
            font-size:14px;
            font-weight: bold;
        }
    }
}
.video-btn-box{
    // display: flex;
    position: fixed;
    text-align: right;
    bottom:10px;
    right:10px;
}
.people-list{
    &>ul{
        &>li{
            display: flex;
            padding:10px;
            color:#fff;
            cursor: pointer;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            &:hover{
                background: rgba(0,0,0,.2);
            }
            &>.pt-box{
                img{
                    width:50px;
                }
            }
            &>.m-box{
                flex:1;
                margin:0 0 0 10px;
                &>.name{
                    font-size:16px;
                    padding:2px 0;
                }
                &>.status{
                    display: flex;
                    color:#ccc;
                    &>i{
                        font-size:20px;
                    }
                }
            }
        }
    }
}
.importDark (@a)when (@a="dark") {
    .confirm-box {
        color: #fff;
        .layui-form-item {
            margin: 0;
            .layui-form-label {
                color: #fff;
            }
        }
    }
    .layui-form-select {
        .layui-input {
            border: 2px solid #26293a;
            border-radius: 5px;
            background-color: lighten(@main-color, 10%);
            color: #fff;
        }
        dl {
            background-color: #2c2c34;
            border: 1px solid #333;
            .scrollBar();
            dd {
                color: #999;

                &:hover {
                    background-color: #4799eb;
                    color: #fff;
                }

                &.layui-this {
                    background-color: #4799eb;
                    color: #fff;
                }
            }
        }
    }
    .event-show {
        background: @main-color;
        .event-btn-close{
            background:@main-color;
            color:#fff;
            border:1px solid darken(@main-color,10%);
        }
        .info-content {
            color:#fff;
            .panel-title {
                background: lighten(@main-color, 10%);
                color: #fff;
            }
            .fire-table-list{
                tr{
                    border-bottom:1px solid lighten(@main-color, 10%);
                }
                .fire-table-main{
                    label{
                        color:#ccc;
                    }
                    span{
                        color:#fff;
                    }
                }
            }
        }
    }
    .layui-table {
        // background: #333;
        color: #fff;
        tbody{
            background:#000;
        }
        tr {
            background:@main-color;
            transition:none;
            th,td {
                border-width: 1px;
                border-style: solid;
                border-color: rgba(60, 62, 78, 0.9);
            }
            &:hover{
                th,td{
                    background:darken(@main-color,10%);
                }
            }
        }
    }
    .layui-layer {
        border: 3px solid;
        border-color: @layer-border-color  !important;
    }

    .layui-layer-title {
        color: @layer-title-font-color  !important;
        background-color: @layer-title-bg  !important;
        border-bottom: 1px solid;
        border-color: @layer-border-color  !important;
        border-radius: 0 !important;
    }

    .layui-layer {
        color: #fff;
        background: lighten(@layer-title-bg, 20%) !important;
    }

    .layui-layer-loading {
        background: none !important;
    }

    .layui-layer-setwin {
        top: 0;
        right: 5px;

        a {
            background: none;

            cite {
                display: none;
            }

            &:hover {
                &:after {
                    color: #eee;
                }

            }

            &:after {
                font-family: zkuasgm-icon;
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                position: relative;
                left: 4px;
                bottom: 3px;
                cursor: pointer;
                font-weight: normal;
            }
        }

        .layui-layer-min {
            &:after {
                content: "\e839"; //特殊字符或形状

            }
        }

        .layui-layer-max {
            &:after {
                content: "\e838"; //特殊字符或形状
            }
        }

        .layui-layer-close1 {
            color: #fff;
            background: none;

            &:after {

                content: "\e629"; //特殊字符或形状

            }
        }

        .layui-layer-close2 {
            color: #fff;
            background: #26293a;
            border-radius: 50%;
            border: 2px solid #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            &:after {

                content: "\e629"; //特殊字符或形状
                left: 0;
                bottom: 0
            }
        }
    }

    .layui-layer-btn {
        border-top: 1px solid;
        border-color: #181924 !important;
        background-color: @layer-title-bg  !important;
    }

    .layui-layer-btn a {
        background: #333;
    }

    .layui-layer-btn .layui-layer-btn1 {
        background: #999;
    }
    .fire-table-list{
        img{
            border:1px solid lighten(@main-color,10%);
        }
    }
    .fire-slider-box{
        background:lighten(@main-color,10%);
        color:#fff;
    }
    .layui-tab-title{
        border-bottom:1px solid lighten(@main-color,10%);
    }
    .layui-table{
        th{
            background:darken(@main-color,5%);
        }
    }
    .zku-step-box{
        color:#fff;
    }
    .layui-elem-field{
        color:#fff;
    }
}
.importDark (@skinName);
